<template>
	<view>
		<view class="box">
			<view class="title">
				<u-radio-group active-color="#F3060D" v-model="value">
					<u-radio>
						<u-icon name="home-fill" color="#333333"></u-icon>
						自营保税仓
					</u-radio>
				</u-radio-group>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in 5" :key="index">
					<view class="l">
						<view class="radio">
							<u-radio-group active-color="#F3060D" v-model="value">
								<u-radio></u-radio>
							</u-radio-group>
						</view>
						<view class="img">
							<image class="img" src="https://img.js.design/assets/img/668c9ee084a543139ecb06cb.jpg#4daecb55af26b59c4ba5893a9ca94283" mode=""></image>
						</view>
						<view class="info">
							<view class="t">
								会员名称
							</view>
							<view class="c fcc">
								会员
							</view>
							<view class="b fcs">
								<view class="price">
									<text class="b">¥169</text>
									<text class="small">.00</text>
								</view>
								<view class="num">
									<u-number-box v-model="value"></u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit fcs">
			<view class="l">
				<u-radio-group active-color="#F3060D" v-model="value">
					<u-radio>
						全选
					</u-radio>
				</u-radio-group>
			</view>
			<view class="r fcs">
				<view class="info">
					<view class="total fcc">
						<view>总计：</view>
						<view class="price">
							<text class="b">¥169</text>
							<text class="small">.00</text>
						</view>
					</view>
					<view class="taxation">
						商品税费：¥ 169.00
					</view>
				</view>
				<view class="btn fcc">
					结算
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1
			};
		}
	}
</script>

<style lang="scss">
.submit {
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	padding: 0 38rpx;
	background-color: #FFFFFF;
	height: 100rpx;
	.r {
		.btn {
			width: 219rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 40rpx;
			background: #F3060D;
			margin-left: 24rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			font-weight: 500;
		}
		.info {
			.taxation {
				font-size: 20rpx;
				color: #808080;
				font-weight: 400;
			}
			.total {
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
			}
			.price {
				.small {
					font-size: 21rpx;
					color: #F3060D;
					font-weight: 500;
				}
				.b {
					font-size: 30rpx;
					color: #F3060D;
					font-weight: 500;
				}
			}
		}
	}
}
.box {
	padding: 33rpx 19rpx;
	border-radius: 10px;
	background: #FFFFFF;
	box-sizing: border-box;
	.list {
		.item {
			margin-top: 24.5rpx;
			.l {
				display: flex;
				align-items: center;
				width: calc(100%);
				.info {
					height: 170rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 100%;
					.b {
						width: 100%;
						.price {
							.small {
								font-size: 26rpx;
								color: #F3060D;
								font-weight: 500;
							}
							.b {
								font-size: 32rpx;
								color: #F3060D;
								font-weight: 500;
							}
						}
					}
					.c {
						width: 100rpx;
						height: 42rpx;
						border-radius: 21px;
						background: #F3060D;
						font-size: 24rpx;
						color: #FFFFFF;
						font-weight: 500;
					}
					.t {
						font-size: 30rpx;
						font-weight: 400;
						color: #333333;
					}
				}
				.img {
					width: 170rpx;
					height: 170rpx;
					margin-right: 24rpx;
					border-radius: 10rpx;
				}
				.radio {
					margin-right: 0rpx;
				}
			}
		}
	}
	.title {
		::v-deep .u-radio__label {
			color: #333333;
			margin-left: 12rpx;
		}
	}
}
</style>
<style>
	page {
		background-color: #F5F6F8;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>